<template>
  <div class="parse">
    <!-- 头部区域 -->
    <van-sticky>
      <header-composition style="padding: 0 12px" :padding="false">
        <template #centerOption>
          <tabs @handleChangeCurrentTab="handleChange" :tabs="tabsList"></tabs>
        </template>
      </header-composition>
    </van-sticky>
    <!-- 内容区域 -->
    <div ref="cardRef" class="detail-body">
      <!--黑名单-->
      <section class="shareList">
        <van-empty v-if="!data.shareCollectData"
                   image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
                   image-size="80"
                   description="描述文字"
        />
        <div class="shareItem"  v-else v-for="(item,index) in data.shareCollectData" @click="handleOperate(item.id)">
          <div class="left">
            <i class="iconfont icon-fenxiang1"></i>
          </div>
          <div class="center">
            <p class="van-ellipsis shareItem-title" v-text="item.text"></p>
            <p class="van-ellipsis" v-text="item.url"></p>
            <p class="van-ellipsis" v-text="item.label"></p>
          </div>
          <div class="right">
            <van-tag color="#e0f0ea" size="medium" text-color="#20bb7b" v-text="item.value"></van-tag>
            <van-icon name="arrow" />
            <!-- 标题最多显示两行 -->
          </div>
        </div>
      </section>
      <!--白名单-->
      <section class="shareList">
        <van-empty v-if="!data.shareSignData"
                   image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
                   image-size="80"
                   description="描述文字"
        />
        <div class="shareItem" v-else v-for="(item,index) in data.shareSignData" @click="handleOperate(item.id)">
          <div class="left">
            <i class="iconfont icon-fenxiang1"></i>
          </div>
          <div class="center">
            <p class="van-ellipsis shareItem-title" v-text="item.text"></p>
            <p class="van-ellipsis" v-text="item.url"></p>
            <p class="van-ellipsis" v-text="item.label"></p>
          </div>
          <div class="right">
            <van-tag color="#e0f0ea" size="medium" text-color="#20bb7b" v-text="item.value"></van-tag>
            <van-icon name="arrow" />
            <!-- 标题最多显示两行 -->
          </div>
        </div>
      </section>
    </div>
    <operate-box :is-show="useOperatorBoxStore().isShowOverlay" @handleClose="handleClose">
      <operate :collect="collect" :menu="menu" v-if="useOperatorBoxStore().showOverlayType==='operate'"/>
    </operate-box>
  </div>
</template>

<script setup>
import useOperatorBoxStore from "@/stores/modules/operatorBox.js";
// 作者：YCH
// 时间：2022年11月06日 22:06:42
import HeaderComposition from "@/components/header/index.vue";
import Tabs from '@/components/tabs/tabs.vue';
import { reactive, ref} from "vue";
import {useRoute} from 'vue-router'
// 注册登录的切换
const cardRef = ref();
const route = useRoute();
console.log(route.params.id);

const currentTab = ref(0);
const tabsList = [{title: '黑名单'}, {title: '白名单'}];
const data = new reactive({
  shareCollectData: [
    {
      id: 1,
      url: "cubox.pro/share/tCrzul ",
      iconfont: "",
      iconfontColor: "#2F80ED",
      text: "之前写的Spring参数校验(Validator)，差点错了",
      type: "",
      typeName: "",
      value: "分享中",
      label: "2次访问，分享于 2022/12/12",
      info: "",
    },
    {
      id: 2,
      url: "cubox.pro/share/tCrzul ",
      iconfont: "",
      iconfontColor: "#2F80ED",
      text: "之前写的Spring参数校验(Validator)，差点错了",
      type: "",
      typeName: "",
      value: "分享中",
      label: "2次访问，分享于 2022/12/12",
      info: "",
    },
    {
      id: 3,
      url: "cubox.pro/share/tCrzul ",
      iconfont: "",
      iconfontColor: "#2F80ED",
      text: "之前写的Spring参数校验(Validator)，差点错了",
      type: "",
      typeName: "",
      value: "分享中",
      label: "2次访问，分享于 2022/12/12",
      info: "",
    },
    {
      id: 1,
      url: "cubox.pro/share/tCrzul ",
      iconfont: "",
      iconfontColor: "#2F80ED",
      text: "之前写的Spring参数校验(Validator)，差点错了",
      type: "",
      typeName: "",
      value: "分享中",
      label: "2次访问，分享于 2022/12/12",
      info: "",
    },
    {
      id: 2,
      url: "cubox.pro/share/tCrzul ",
      iconfont: "",
      iconfontColor: "#2F80ED",
      text: "之前写的Spring参数校验(Validator)，差点错了",
      type: "",
      typeName: "",
      value: "分享中",
      label: "2次访问，分享于 2022/12/12",
      info: "",
    },
    {
      id: 3,
      url: "cubox.pro/share/tCrzul ",
      iconfont: "",
      iconfontColor: "#2F80ED",
      text: "之前写的Spring参数校验(Validator)，差点错了",
      type: "",
      typeName: "",
      value: "分享中",
      label: "2次访问，分享于 2022/12/12",
      info: "",
    },
    {
      id: 1,
      url: "cubox.pro/share/tCrzul ",
      iconfont: "",
      iconfontColor: "#2F80ED",
      text: "之前写的Spring参数校验(Validator)，差点错了",
      type: "",
      typeName: "",
      value: "分享中",
      label: "2次访问，分享于 2022/12/12",
      info: "",
    },
    {
      id: 2,
      url: "cubox.pro/share/tCrzul ",
      iconfont: "",
      iconfontColor: "#2F80ED",
      text: "之前写的Spring参数校验(Validator)，差点错了",
      type: "",
      typeName: "",
      value: "分享中",
      label: "2次访问，分享于 2022/12/12",
      info: "",
    },
    {
      id: 3,
      url: "cubox.pro/share/tCrzul ",
      iconfont: "",
      iconfontColor: "#2F80ED",
      text: "之前写的Spring参数校验(Validator)，差点错了",
      type: "",
      typeName: "",
      value: "分享中",
      label: "2次访问，分享于 2022/12/12",
      info: "",
    },
  ],
  shareSignData: [
    {
      id: 1,
      url: "cubox.pro/share/tCrzul ",
      iconfont: "",
      iconfontColor: "#2F80ED",
      text: "🔥我说MySQL每张表最好不超过2000万数据，面试官让我回去等通知？",
      type: "",
      typeName: "",
      value: "分享中",
      label: "2次访问，分享于 2022/12/12",
      info: "",
    },
    {
      id: 2,
      url: "cubox.pro/share/tCrzul ",
      iconfont: "",
      iconfontColor: "#2F80ED",
      text: "🔥我说MySQL每张表最好不超过2000万数据，面试官让我回去等通知？",
      type: "",
      typeName: "",
      value: "分享中",
      label: "2次访问，分享于 2022/12/12",
      info: "",
    },
    {
      id: 3,
      url: "cubox.pro/share/tCrzul ",
      iconfont: "",
      iconfontColor: "#2F80ED",
      text: "🔥我说MySQL每张表最好不超过2000万数据，面试官让我回去等通知？",
      type: "",
      typeName: "",
      value: "分享中",
      label: "2次访问，分享于 2022/12/12",
      info: "",
    },
  ],
});
const menu = [
  { url: "/home", iconfont: "fa-solid fa-arrow-up-right-from-square", iconColor: "", text: "打开连接" },
  { url: "/home", iconfont: "iconfont icon-chakanshenqing", iconColor: "", text: "查看这个收藏" },
  { url: "/home", iconfont: "iconfont icon-lianjie1", iconColor: "", text: "复制连接" },
  { url: "/home", iconfont: "fa-solid fa-share", iconColor: "", text: "分享链接到" },
  { url: "/home", iconfont: "fa-solid fa-ban", iconColor: "red", text: "暂停分享" },
  { url: "/home", iconfont: "fa-regular fa-trash-can", iconColor: "red", text: "停止分享并删除记录" },
]
// 切换tab
const handleChange = (val) => {
  currentTab.value = val;
  if (cardRef.value){
    console.log(cardRef.value.classList)
    if (val === 0) {
      cardRef.value.classList.remove("active");
    }else {
      cardRef.value.classList.toggle("active");
    }
  }
}
const collect = ref();
// 操作
const handleOperate = (value) => {
  useOperatorBoxStore().setShowOverlayType('operate')
  useOperatorBoxStore().setIsShowOverlay(true);
  collect.value = value
};
// 关闭遮罩层
const handleClose = (value) => {
  // console.log(value)
  useOperatorBoxStore().setIsShowOverlay(false)
}
</script>

<style lang="less" scoped>
.parse {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  overflow-x: hidden;
  scroll-behavior: smooth;
  overscroll-behavior: contain; //必须加这个，不然会带动整个屏幕滚动，如果整屏幕也有滚动的话
  .detail-body {
    padding: 0 12px;
    position: relative;
    top: 10px;
    section{
      .shareItem{
        padding: 14px;
        background-color: var(--card-background-color);
        border-radius: var(--card-border-radius);
        margin-bottom: var(--card-margin-bottom);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: var(--primary-font-family);
        .left{
          i{
            font-size: 60px;
          }
        }
        .center{
          max-width: 60%;
          p:nth-of-type(1){
            font-size: 16px;
          }
          p:nth-of-type(2),p:nth-of-type(3){
            font-size: 13px;
            line-height: 16px;
            //color: #a2a3a4;
            color: var(--primary-font-color);
          }
        }
        .right{
          --van-tag-radius:8px;
        }
      }
    }
    .shareList{
      width: calc(100% - 12*2px);
      position: absolute;
      transition: 0.5s;
    }
    .shareList:nth-of-type(1) {
      transform: translateX(0%);
    }
    .shareList:nth-of-type(2) {
      transform: translateX(110%);
    }
  }

  .detail-body.active {
    .shareList:nth-of-type(1) {
      transform: translateX(-110%);
    }

    .shareList:nth-of-type(2) {
      transform: translateX(0%);
    }
  }
}

.parse::-webkit-scrollbar {
  display: none; /*隐藏滚动条*/
}
</style>
